<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div {
            border: 1px solid gray;
            margin-top: 10px;
            padding: 10px;
            width: 400px;
        }
    </style>
  </head>
  <body>
    <style>
        .div1::before {
            content: 'before';
            color: pink;
        }

        .div1::after {
            content: 'after';
            color: green;
        }

        .div1::first-letter {
            color: skyblue;
            font-weight: 600;
            font-size: 40px;
        }

        .div1::first-line {
            color: orange;
        }

        .div1::selection {
            background-color: gray;
        }
    </style>
    <div class="div1">伪元素选择器</div>
    <br>
    <span class="div1" style="padding: 10px">伪元素选择器</span><br>

    <style>
        .div2::first-letter {
            color: skyblue;
            font-weight: 600;
            font-size: 40px;
        }

        .div2::first-line {
            color: orange;
        }

        .div2::selection {
            background-color: gray;
        }
    </style>
    <div class="div2">
      这是一段中文文本。这是一段中文文本。这是一段中文文本。这是一段中文文本。这是一段中文文本。这是一段中文文本。
    </div>
    <div class="div2">
      This is an English text！This is an English text！This is an English text！This is an English text！This is an English
      text！
    </div>

    <style>
        li::marker {
            color: pink;
            content: '+';
            font-size: 1.2em;
        }
    </style>
    <ul>
      <li>这是一</li>
      <li>这是二</li>
      <li>这是三</li>
    </ul>

    <style>
        input[type='file']::file-selector-button {
            color: skyblue;
            font-weight: bold;
            font-size: 20px;
            border-radius: 4px;
            border: 2px pink solid;
            padding: 10px;
        }
    </style>
    <input type="file"><br><br><br>

    <style>
        input[type='text'], textarea {
            height: 100px;
        }

        input[type='text']::placeholder, textarea::placeholder {
            color: skyblue;
            font-weight: 600;
            font-size: 20px;
            border-radius: 4px;
            border: 2px pink solid;
            padding: 10px;
        }
    </style>
    <input type="text" placeholder="请输入">
    <textarea placeholder="请输入"></textarea>
  </body>
</html>